<!--
Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<polymer-element name="ct-last-updated" attributes="date">
  <template>
    <template if="{{ date }}">
      <style>
        .stale_5minutes {
          color: orange;
        }
        .stale_10minutes {
          color: red;
        }
        .stale_20minutes {
          background-color: red;
          color: black;
        }
        .date_shown {
          display: inline;
        }
        .date_hidden {
          display: none;
        }
      </style>
      <span class="{{ date | _style }}">Updated @ {{ date | _hours }}:{{ date | _minutes }}</span>
      <span class='{{ date | _dateStyle }}'>{{ date | _date }}</span>
    </template>
  </template>
  <script>
  (function() {
    Polymer({
      date: null,
      _style: function(date) {
        var staleness = date.minutesAgo();
        if (staleness >= 20)
          return "stale_20minutes";
        if (staleness >= 10)
          return "stale_10minutes";
        if (staleness >= 5)
          return "stale_5minutes";
        return "";
      },
      _hours: function(date) {
        return date.getHours();
      },
      _minutes: function(date) {
        return date.getMinutes().toString().padLeft(2, '0');
      },
      _date: function(date) {
        return date.toDateString();
      },
      _dateStyle: function(date) {
        return date.hoursAgo() > 12 ? 'date_shown' : 'date_hidden';
      },
    });
  })();

  </script>
</polymer-element>
